<script >
export default {
    name: "Main",

    data(){
        return {

            user: JSON.parse(sessionStorage.getItem("user")),
            tableData:[],
            nameData:null,
            pageSize:11,
            pageNum:1,
            total:0,



            isSelectHidden:true,
            selectedIds: [],


        }
    },
    methods:{

        loadPost() {

                this.$axios.post(this.$httpUrl + '/unorder/userquerylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": {
                        "id":"",
                        "uid":this.user.id,
                        "gid":'',
                        "time":'',
                        "num":''
                    }
                }).then(res => res.data).then(res => {

                    this.total = res.total;
                    this.tableData = res.data.dataList;
                    this.nameData =res.data.namemap;
                })

        },

        deletePost(){

            this.$axios.post(this.$httpUrl + '/unorder/pay', {
                "ids":this.selectedIds
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '支付成功',
                        type: 'success'
                    });
                    sessionStorage.setItem('user', JSON.stringify(res.data))
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '余额不足'
                    });
            })
        },
        formatGoodsName(row, column, cellValue, index) {
            return this.nameData[cellValue] || '未知商品';
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.loadPost();
        },


        selectChange(selectedRows){
            this.selectedIds = selectedRows.map(row => row.id);
        },

    },

    beforeMount() {
        this.loadPost();
    }
}
</script>

<template>
    <div>
        <el-row type="flex" class="row-bg" justify="left" style="height: 5vh;padding: 0;margin: 0">
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-minus"
                                           @click="isSelectHidden=false" :disabled="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-check"
                                           @click="()=>{
                                               isSelectHidden=true;
                                               deletePost();
                                               $refs.table.clearSelection();
                                           }" v-show="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-close"
                                           @click="()=>{
                                               isSelectHidden=true;
                                               $refs.table.clearSelection();
                                           }" v-show="!isSelectHidden"></el-button></el-col>
        </el-row>
        <el-table   ref="table"
                    :data="tableData"
                    :header-cell-style="{background:'#f2f5fc',color:'#555555'}"
                    @selection-change="selectChange"
                    style="min-height:78vh;"
                    :row-style="{height: '45px'}"
                    stripe>
            <el-table-column v-if="!isSelectHidden" type="selection" width="55">
            </el-table-column>
            <el-table-column  prop="id" label="订单索引">
            </el-table-column>
            <el-table-column prop="gid" label="物品编号" >
            </el-table-column>
            <el-table-column prop="gid" label="物品名称" :formatter="formatGoodsName" >
            </el-table-column>
            <el-table-column prop="time" label="时间" >
            </el-table-column>
            <el-table-column prop="num" label="购买数量" >
            </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="total,prev, pager, next,jumper"
            style="text-align: center"
            :total=this.total
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<style scoped>
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>